<template>
    <div>
        <div style="margin-top: 20px;margin-left:5%">
            <dlq-search @search="search" search-type="2" :area-name="areaName" :aa="aa"></dlq-search>
        </div>

        <div style="width: 90%;margin-left:5%;margin-top: 10px">
            <vxe-table
                    height="500"
                    highlight-hover-row
                    border
                    resizable
                    show-overflow="tooltip"
                    keep-source
                    ref="xTable"
                    :loading="loading"
                    :data="tableData"
                    :edit-config="{trigger: 'manual', mode: 'row'}">
                <vxe-table-column type="seq" width="60"></vxe-table-column>
                <vxe-table-column field="county" title="区县市" :edit-render="{name: '$select', options: quList}"></vxe-table-column>
                <vxe-table-column field="company" title="宾馆名称" :edit-render="{name: 'input', attrs: {type: 'text'}}"></vxe-table-column>
                <vxe-table-column field="zs" title="房间总数" :edit-render="{name: 'input', attrs: {type: 'text'}}"></vxe-table-column>
                <vxe-table-column field="num_sy" title="使用数量" :edit-render="{name: '$input', props: {type: 'number'}}"></vxe-table-column>
                <vxe-table-column field="num_ky" title="可接纳房间数量" :edit-render="{name: '$input', props: {type: 'text'}}"></vxe-table-column>
                <vxe-table-column field="num_wh" title="待房间数量" :edit-render="{name: '$input', props: {type: 'text'}}"></vxe-table-column>
                <vxe-table-column field="type" title="状态" :edit-render="{name: '$select', options: state}"></vxe-table-column>
                <vxe-table-column field="num_gl" title="管理人员数量" :edit-render="{name: '$input', props: {type: 'text'}}"></vxe-table-column>
                <vxe-table-column field="num_info" title="联系人" :edit-render="{name: '$input', props: {type: 'text'}}"></vxe-table-column>
                <vxe-table-column field="bz" title="备注" :edit-render="{name: '$input', props: {type: 'text'}}"></vxe-table-column>
                <vxe-table-column title="操作" width="160">
                    <template v-slot="{ row }">
                        <template v-if="$refs.xTable.isActiveByRow(row)">
                            <vxe-button @click="saveRowEvent(row)">保存</vxe-button>
                            <vxe-button @click="cancelRowEvent(row)">取消</vxe-button>
                        </template>
                        <template v-else>
                            <vxe-button @click="editRowEvent(row)">编辑</vxe-button>
                        </template>
                    </template>
                </vxe-table-column>
            </vxe-table>
        </div>

        <br>
        <Row type="flex" justify="center">
            <Page show-sizer :current="pageObj.pageNo" :page-size="pageObj.pageSize" :total="pageObj.totalRecord"
                  @on-change="getPageNo" :page-size-opts="[10,20,50,200]" @on-page-size-change="pageSizeChange"/>
        </Row>
    </div>
</template>

<script>
import {
  findglbgDetailList, updatefindglbgCounty, insetgequ } from '@/api/statistics-data-list'
import areaJSON from '@/libs/area'
import DlqSearch from '@/components/search'
export default {
  name: 'hotelQuarantine',
  components: { DlqSearch },
  data () {
    return {
      areaName: '',
      aa: '0',
      state: [{ value: '0', label: '启动' }, { value: '1', label: '停用' }],
      quList: [],
      areaList: areaJSON,
      loading: false,
      tableData: [],
      sexList: [],
      pageObj: {
        pageNo: 1,
        pageSize: 50,
        totalRecord: 0
      }
    }
  },
  methods: {
    editRowEvent (row) {
      console.log(row, 111)
      let a = []
      for (let i = 0; i < this.areaList.length; i++) {
        a.push({ value: this.areaList[i].name, label: this.areaList[i].name })
      }
      this.quList = a
      this.$refs.xTable.setActiveRow(row)
    },
    saveRowEvent (row) {
      this.$refs.xTable.clearActived().then(() => {
        this.loading = true
        console.log(row, '保存数据')
        let data = {
          num_info: row.num_info,
          num_gl: row.num_gl,
          county: row.county,
          company: row.company,
          zs: row.zs,
          num_sy: row.num_sy,
          num_ky: row.num_ky,
          num_wh: row.num_wh,
          type: row.type,
          id: row.id,
          bz: row.bz
        }
        updatefindglbgCounty(data).then(ret => {
          let a = { type: '隔离宾馆 ', classification: '2', address: 'http://124.95.133.9:80/api/us/yiqing/yqwlryinfo/insetgequ' }
          insetgequ(a).then(res => {

          })
        })
        setTimeout(() => {
          this.loading = false
          this.$XModal.message({ message: '保存成功！', status: 'success' })
        }, 300)
      })
    },
    cancelRowEvent (row) {
      const xTable = this.$refs.xTable
      xTable.clearActived().then(() => {
        // 还原行数据
        xTable.revertData(row)
      })
    },
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.init()
    },
    pageSizeChange (e) {
      this.pageObj.pageSize = e
      this.init()
    },
    init (data) {
      const obj = {
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize,
        ...data
      }
      findglbgDetailList(obj).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableLoading = false
          this.pageObj.totalRecord = data.data.totalRecord
          this.totalnum = data.data.totalRecord
          for (let i = 0; i < data.data.results.length; i++) {
            data.data.results[i].num_wh = parseInt(data.data.results[i].zs) - parseInt(data.data.results[i].num_sy) - parseInt(data.data.results[i].num_ky)
          }
          this.tableData = data.data.results
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    search (value) {
      console.log(value, '888')
      this.pageObj.pageNo = 1
      // this.$refs.statisticsBar.isolationHotelAction(value.county)
      if (value.county === '全市') {
        this.init()
      } else {
        this.init(value)
      }
    }
  },
  mounted () {
    if (this.$route.query && this.$route.query.areaName) {
      this.areaName = this.$route.query.areaName
      this.init({ county: this.areaName })
    } else {
      this.init()
    }
  }
}
</script>

<style scoped>

</style>
